<template>
	<div class="header">厦门保险机构查询</div>

	<div class="body" v-if="visible">
		<div class="title">{{ name }}</div>

		<ul class="list">
			<router-link
				class="item"
				v-for="item in list"
				:key="item.id"
				:to="'/detail?id=' + item.id"
			>
				<!-- <span>
					<img class="logo" :src="item.url" alt="" />
				</span> -->
				<span>{{ item.name }}</span>
				<!-- <div class="phone">
					<span class="label">电话：</span>{{ item.phone }}
				</div> -->
			</router-link>
		</ul>
	</div>
</template>

<script>
import { defineComponent } from 'vue'
import { exposelists } from '@/api'
import { showLoadingToast, closeToast } from 'vant'
export default defineComponent({
	setup(props, { emit, slots, attrs }) {},
	data() {
		return {
			list: []
		}
	},
	computed: {
		// 机构类型，用于列表传参
		className() {
			return this.$route.query.type
		},
		name() {
			return this.$route.query.name
		},
		visible() {
			return ['财产保险公司', '人身保险公司', '保险中介公司'].includes(
				this.name
			)
		}
	},
	watch: {
		className() {
			this.reflash()
		}
	},
	created() {
		// 获取列表
		this.reflash()
	},
	mounted() {},
	methods: {
		reflash() {
			showLoadingToast({
				message: '正在加载'
			})
			exposelists(this.className)
				.then((res) => {
					this.list = res.page.list
				})
				.finally(closeToast)
		}
	},
	components: {}
})
</script>

<style lang="scss" scoped="scoped">
.header {
	height: 300rem;
	background-image: url('@/assets/network.jpg');
	background-position: center top;
	background-size: cover;
	background-color: #d4defe;
	font-family: 'ZCoo GaoduanHei';
	line-height: 250rem;
	// padding-left: $space_4;
	font-size: 64px;
	font-style: italic;
	color: #fff;
	text-align: center;
}

.body {
	border-radius: 40rem 40rem 0 0;
	margin-top: -20rem;
	background-color: #fff;
	height: calc(100vh - 260rem);
	padding-top: 40rem;
	background-image: -webkit-linear-gradient(top, #e6f6ff, #fff 100rem),
		-webkit-linear-gradient(top, #e6f6ff, #fff 100rem);
	.title {
		padding: $space_1 $space_4;
		padding-bottom: $space_4;
	}
}

ul.list {
	margin: 0 $space_4;

	.item {
		color: #333;
		box-shadow: 0 0 26rem #e0eff1;
		height: 106rem;
		display: grid;
		align-items: center;
		grid-template-columns: auto 1fr auto;
		font-size: $font_medium;
		padding-left: 30rem;
		margin-bottom: $space_3;

		.logo {
			width: 75rem;
			height: 70rem;
			margin-right: 20rem;
			object-fit: contain;
		}

		.phone {
			padding-right: $space_3;
			white-space: nowrap;
			.label {
				color: #999;
			}
		}
	}
}
</style>
